<template>
	<view class="content">
		<!-- 这里是状态栏 -->
		<view class="status_bar"></view>
		<Head :webtext='webtext'></Head>
		<view class="body">
			<image class="logo" src="../../static/static/loginlogo.png" mode="widthFix"></image>
			<view class="logoName">
				中金国际
			</view>
			<!-- 账号密码 -->
			<view class="input" style="margin-bottom: 30upx;">
				<image src="../../static/static/user.png" mode="widthFix"></image>
				<input type="text" v-model="username" placeholder="请输入用户名" />
			</view>
			<view class="input">
				<image src="../../static/static/pass.png" mode="widthFix"></image>
				<input type="password" v-model="password" placeholder="请输入密码" />
			</view>
			<!-- 记住账号 联系客服 -->
			<view class="lineBox">
				<u-checkbox style="color='white'" v-model="checked" :disabled="false" label-size="27" size="32">记住账号
				</u-checkbox>
				<text @click="navgo">联系客服</text>
			</view>
			<!-- 登录 -->
			<view class="logoin" @click="login">登录</view>
			<!-- 注册 -->
			<view class="registered">
				<text @click="registered">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Head from '../../components/head.vue'
	export default {
		components: {
			Head
		},
		data() {
			return {
				webtext: "登录",
				username: "", //用户名
				password: "", //密码
				checked: false, //记住账号-密码
			};
		},
		onLoad() {
			if (uni.getStorageSync('user').checked) {
				this.username = uni.getStorageSync('user').username
				this.password = uni.getStorageSync('user').password
				this.checked = uni.getStorageSync('user').checked
			}
		},
		methods: {
			// 跳转到客服 
			navgo() {
				uni.switchTab({
					url: "/pages/customer/index"
				})
			},
			registered() {
				uni.navigateTo({
					url: "/pages/login/registered"
				})
			},
			// 登录
			login() {
				if(this.username && this.password){
					this.$u.api.login({
						username: this.username,
						password: this.password,
						// checked: this.checked
					}).then(res => {
						// 创建个用户信息
						let user = {
							username: this.username,
							password: this.password,
							checked: this.checked
						}
						// 存储token
						uni.setStorageSync("Authorized", res.token)
						// 存储用户信息
						uni.setStorageSync("user", user)
						// 弹窗提示
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: "none"
						});
						// 路由跳转
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000);
					})
				} else{
					uni.showToast({
						title: "请填写账号或密码",
						duration: 1000,
						icon: "none"
					});
				}
			}
		}
	}
</script>

<style scoped>
	.body {
		height: calc(100vh - 88upx - var(--status-bar-height));
		overflow-y: auto;
	}

	.body .logo {
		margin: 40upx auto 0;
		display: block;
		width: 200upx;
	}

	.body .logoName {
		text-align: center;
		line-height: 60upx;
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		font-size: 34upx;
		color: #cbcbd6;
		margin-bottom: 20upx;
	}

	.input {
		width: 590upx;
		height: 80upx;
		background-color: #31395e;
		margin: 0 auto;
		border-radius: 0;
		color: #f2f2f2;
		display: flex;
		align-items: center;
		border: 1px solid rgba(0, 0, 0, .2);
		border-radius: 10upx;
	}

	.input image {
		width: 28upx;
		margin: 0 20upx;
	}

	.input input {
		font-size: 24upx;
	}

	.lineBox {
		width: 590upx;
		height: 42upx;
		margin: 0 auto;
		margin: 40upx auto;
		color: #e8e8f0;
		padding: 0 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.lineBox text {
		font-size: 28upx;
		text-decoration: underline;
	}

	.logoin {
		width: 590upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		border-radius: 60upx;
		margin: 60upx auto 40upx;
		font-size: 34upx;
		color: #fff;
		background-color: #0ea2ff;
	}

	.registered {
		margin: 60upx auto;
		text-align: center;
		font-size: 24upx;
		color: #518bbe;
	}
</style>
